<template>
  <div>
    <Breadcrumb :style="{margin: '16px 0'}">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>用户信息</BreadcrumbItem>
      <BreadcrumbItem>添加用户</BreadcrumbItem>
    </Breadcrumb>
    <Card>
      <div style="min-height: 600px">
        <Row>
          <Col span="10" offset="7">
            <Form :model="addUser" :label-width="90" ref="addUser" :rules="addUserRules">
              <FormItem label="用户名" prop="userName">
                <Input type="text" v-model="addUser.userName" placeholder="请输入用户名" />
              </FormItem>
              <FormItem label="账号" prop="account">
                <Input type="text" v-model="addUser.account" placeholder="请输入账号" />
              </FormItem>
              <FormItem label="密码" prop="userPassword" required>
                <Input type="password" v-model="addUser.userPassword" placeholder="请输入密码" />
              </FormItem>
              <FormItem label="确认密码" prop="passwdCheck" required>
                <Input type="password" v-model="addUser.passwdCheck" placeholder="请再次输入密码" />
              </FormItem>
              <!-- <FormItem label="权限" prop="level">
                <Select v-model="addUser.level">
                  <Option label="管理员" value="1"></Option>
                  <Option label="普通用户" value="2"></Option>
                </Select>
              </FormItem> -->
              <FormItem>
                <Button type="primary" @click="addUserSubmit('addUser')">提交</Button>
              </FormItem>
            </Form>
          </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
import qs from "qs";
export default {
  // middleware: 'auth',
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'));
      } else {
        if (this.addUser.passwdCheck !== '') {
          // 对第二个密码框单独验证
          this.$refs.addUser.validateField('passwdCheck');
        }
        callback();
      }
    };
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('确认密码不能为空'));
      } else if (value !== this.addUser.userPassword) {
        callback(new Error('两次密码输入不一致'));
      } else {
        callback();
      }
    };
    return {
      addUser: {
        userName: "",
        account: "",
        userPassword: "",
        passwdCheck: "",
        level: '2'
      },
      addUserRules: {
        userName: [
          {
            required: true,
            message: "请输入用户名，不能为空。",
            trigger: "blur"
          }
        ],
        account: [
          { required: true, message: "请输入账号，不能为空。", trigger: "blur" }
        ],
        userPassword: [
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        passwdCheck: [
          {
            validator: validatePassCheck,
            trigger: 'blur'
          }
        ],
        // level: [
        //   {
        //     required: true,
        //     message: "请选择用户类型",
        //     trigger: "blur"
        //   }
        // ]
      }
    };
  },
  methods: {
    addUserSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Modal.warning({
            title: "创建新用户？",
            content: "此操作将创建一个新的后台管理用户，确认？",
            onOk: () => {
              this.$axios
                .post(
                  "/bm/opera/sysuser/addSysuser",
                  qs.stringify({
                    userName: this.addUser.userName,
                    account: this.addUser.account,
                    userPassword: this.addUser.userPassword,
                    level: this.addUser.level
                  })
                )
                .then(res => {
                  if (res.data.code == 200) {
                    this.$Message.success("创建新用户成功");
                    this.$router.push("/user/list");
                  }
                });
            },
            onCancel: () => {
              this.$Message.info("用户取消操作");
            }
          });
          // this.$Message.success("Success!");
        } else {
          this.$Message.error("表单验证失败，请检查后重试");
        }
      });
    }
  }
};
</script>

<style lang="less">
</style>
